<template>
  <el-card class="category-container">
    <template #header>
      <div class="header">
        <div class="search">
          <el-input
            style="width: 200px; margin-right: 10px"
            placeholder="名称"
            v-model="params.title"
            :clearable="true"
          />
          <el-select
            v-model="params.hide"
            placeholder="全部"
            @change="getList"
            :style="{
              width: '160px',
            }"
            :clearable="true">
            <template #prefix>
              <div class="pl-10px">状态：</div>
            </template>
            <el-option
              v-for="item in [
                    {value: 1, label: '显示'},
                    {value: 2, label: '隐藏'},
                ]"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <el-button-group>
          <el-button type="primary" @click="handleAdd">增加</el-button>
          <el-button type="info">总数：{{ state.total }}</el-button>
        </el-button-group>
      </div>
    </template>
    <el-table
      v-loading="state.loading"
      ref="multipleTable"
      :data="state.tableData"
      tooltip-effect="dark">
      <!--<el-table-column type="selection" width="55"/>-->
      <el-table-column prop="id" label="#ID" align="center" width="60"/>
      <el-table-column prop="title" label="分类名称"/>
      <el-table-column label="排序值" width="120" align="center">
        <template #default="scope">
          <el-input v-model.number="scope.row.orderby"
            @change="updated(scope.row)"
            :input-style="{
                      textAlign: 'center'
                    }">
          </el-input>
        </template>
      </el-table-column>
      <el-table-column label="隐藏/显示" width="160" align="center">
        <template #default="scope">
          <el-switch v-model="scope.row.hide"
            :active-value="1"
            :inactive-value="2"
            @change="updated(scope.row)"></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="添加时间" width="240" align="center">
        <template #default="scope">
          {{ toDateTime(scope.row.created_at) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180" align="center">
        <template #default="scope">
          <!--<a style="cursor: pointer; margin-right: 10px" @click="handleEdit(scope.row.id)">修改</a>-->
          <el-popconfirm title="确定删除吗？" @confirm="deleted(scope.row)">
            <template #reference>
              <el-button type="danger" size="small">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

  </el-card>
  <DialogGoodsCategory ref='refCateInfo'
    :reload="getList"
    :type="state.type"/>
</template>

<script setup>
import { onMounted, reactive, ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import { toDateTime } from "../utils";

import DialogGoodsCategory from '../components/DialogGoodsCategory.vue'
import { AdminGoodsCategoryDel, AdminGoodsCategoryList, AdminGoodsCategoryPut } from "../api/server/goods/category";
import crud from '../utils/crud'

const router = useRouter()
const multipleTable = ref(null)
const refCateInfo = ref(null)

const params = reactive({
  title: '',
  hide: '',
})
const state = reactive({
  loading: false,
  tableData: [], // 数据列表
  multipleSelection: [], // 选中项
  total: 0, // 总条数
})

onMounted(() => {
  getList()
})
watch(() => params.title, (val, oldest) => {
  getList()
})

// 获取分类列表
const getList = async () => {
  state.loading = true
  const data = await AdminGoodsCategoryList(params)
  state.tableData = data
  state.total = data.length
  state.loading = false
}

// 添加分类
const handleAdd = () => refCateInfo.value.open()
const updated = row => crud.update(AdminGoodsCategoryPut, row, getList)
const deleted = row => crud.delete(AdminGoodsCategoryDel, row, [], getList)

</script>

<style scoped>
.category-container {
  min-height: 100%;
}

:deep(.el-card.is-always-shadow) {
  min-height: 100%;
}

</style>
